<template>
  <div>
    <h1>watchEffect的使用</h1>
    <h1 v-text="num"></h1>
    <button @click="num++">自增</button>
    <hr />
    <h1 v-text="foo"></h1>
    <button @click="foo--">自减</button>
    <hr />
    <h1 v-text="bar.a"></h1>
    <button @click="bar.a++">改变</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch, watchEffect } from "vue";

let num = ref(1);
let foo = ref(200);
let bar = reactive({ a: 1, b: 2 });

// watchEffect(fn)
// watchEffect 处理各种副作用  类似于生命周期函数
// watchEffect(() => {
//   console.log("执行副作用1");
// });

// 在一个组件中，可以写多个watchEffect
// 由于watchEffect使用到了num，当num发生变化了，就会重新执行
// watchEffect(() => {
//   console.log("执行副作用1", num.value);
// });

// 只能foo数据变化，才会重新执行
// watchEffect(() => {
//   console.log("执行副作用1", foo.value);
// });

watchEffect(() => {
  console.log("执行副作用1", foo.value, num.value);
});
</script>

<style lang="scss" scoped>
</style>